<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen bg-gray-50">
    <div class="mx-auto max-w-5xl py-8 px-4">
      <!-- 步骤条 -->
      <div class="mb-12">
        <el-steps :active="1" finish-status="success">
          <el-step title="提交认证资料" />
          <el-step title="等待资料审核" />
          <el-step title="企业认证成功" />
        </el-steps>
      </div>

      <!-- 主体内容 -->
      <div class="bg-white rounded-lg shadow-sm p-8">
        <!-- 企业信息 -->
        <div class="mb-10">
          <h2 class="text-lg font-medium mb-6 flex items-center">
            <div class="w-1 h-5 bg-blue-500 mr-2"></div>
            企业信息
          </h2>

          <div class="space-y-6">
            <div>
              <label class="block text-gray-600 mb-2">企业名称：</label>
              <el-input v-model="form.companyName" placeholder="请填写与营业执照上的企业名称" />
            </div>

            <div>
              <label class="block text-gray-600 mb-2">信用代码：</label>
              <el-input v-model="form.creditCode" placeholder="请填写与证件上的统一社会信用代码" />
            </div>

            <div>
              <label class="block text-gray-600 mb-2">营业执照：</label>
              <div class="border-2 border-dashed border-gray-200 rounded-lg p-6 text-center">
                <el-upload
                    class="upload-demo"
                    drag
                    action="#"
                    :auto-upload="false"
                    :show-file-list="false"
                    @change="handleFileChange"
                >
                  <el-icon class="text-gray-400 text-3xl mb-2"><Upload /></el-icon>
                  <div class="text-gray-500">上传最新营业执照照片</div>
                  <div class="text-gray-400 text-sm mt-1">支持 jpg、png 格式，大小不超过 3MB</div>
                </el-upload>
              </div>
            </div>

            <div>
              <label class="block text-gray-600 mb-2">通讯地址：</label>
              <el-input v-model="form.address" placeholder="请填写详细的通讯地址" />
            </div>
          </div>
        </div>

        <!-- 联系人信息 -->
        <div class="mb-10">
          <h2 class="text-lg font-medium mb-6 flex items-center">
            <div class="w-1 h-5 bg-blue-500 mr-2"></div>
            联系人信息
          </h2>

          <div class="space-y-6">
            <div>
              <label class="block text-gray-600 mb-2">联系人姓名：</label>
              <el-input v-model="form.contactName" placeholder="请填写联系人姓名" />
            </div>

            <div>
              <label class="block text-gray-600 mb-2">身份证号：</label>
              <el-input v-model="form.idCard" placeholder="请填写18位身份证号码" />
            </div>

            <div>
              <label class="block text-gray-600 mb-2">手机号码：</label>
              <el-input v-model="form.phone" placeholder="请填写联系人手机号码" />
            </div>
          </div>
        </div>

        <!-- 注意事项 -->
        <div class="mb-10">
          <h3 class="text-gray-600 mb-4">注意事项：</h3>
          <ul class="text-gray-500 space-y-2 text-sm">
            <li>1. 适用企业、个体工商户、政府、事业单位、学校、组织等，账号归属企业；</li>
            <li>2. 认证账号可开启企业增值税专用发票；</li>
            <li>3. 一个企业信息主体默认可认证 3 个账号；</li>
            <li>4. 上传照片文件格式支持 png、jpg 和 bmp；</li>
            <li>5. 营业执照照片大小不超过 3MB，尺寸最小为 500px × 500px；</li>
            <li>6. 所有上传信息均会被妥善保管，不会用于其他商业用途或传输给其他第三方；</li>
          </ul>
        </div>

        <!-- 提交按钮 -->
        <div class="text-center">
          <el-button type="primary" class="w-40 !rounded-button" @click="handleSubmit">
            提交认证资料
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Upload } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

const form = ref({
  companyName: '',
  creditCode: '',
  address: '',
  contactName: '',
  idCard: '',
  phone: '',
  license: null as File | null
});

const handleFileChange = (file: File) => {
  if (file.size > 3 * 1024 * 1024) {
    ElMessage.error('文件大小不能超过 3MB');
    return;
  }
  form.value.license = file;
};

const handleSubmit = () => {
  if (!form.value.companyName) {
    ElMessage.warning('请填写企业名称');
    return;
  }
  if (!form.value.creditCode) {
    ElMessage.warning('请填写信用代码');
    return;
  }
  if (!form.value.license) {
    ElMessage.warning('请上传营业执照');
    return;
  }
  if (!form.value.contactName) {
    ElMessage.warning('请填写联系人姓名');
    return;
  }
  if (!form.value.idCard) {
    ElMessage.warning('请填写身份证号');
    return;
  }
  if (!form.value.phone) {
    ElMessage.warning('请填写手机号码');
    return;
  }

  ElMessage.success('提交成功');
};
</script>

<style scoped>
.el-input {
  @apply w-full;
}
.el-input :deep(.el-input__wrapper) {
  @apply shadow-none;
}

.upload-demo :deep(.el-upload-dragger) {
  @apply w-full border-none;
}
</style>

